import {
  AbstractAccordion,
  AbstractImage,
  AbstractNavigator,
  C20AllListing,
  Layout,
  PriceView,
  UserSubPageBase,
} from "@/components";
import { useEffect } from "react";
import { useDidShow } from "@tarojs/taro";
import { colors } from "@/data/shared/colors";
import { OrderHistoryStoreItemShape } from "@/data/user/userTypes";
import { useUserInfo, getUserOrderList } from "@/store/userDataContext";
import { useAuth } from "@/store/authContext";
import { View } from "@tarojs/components";
import { navigateTo } from "@/utils/navigation";
import { sendAction, ActionNames } from "@/utils/tracking";
import style from "./index.module.scss";

const StoreItemOrderCard = ({
  storeItemOrderData,
}: {
  storeItemOrderData: OrderHistoryStoreItemShape;
}) => (
  <View className={style["ordercard"]}>
    <View className={style["ordercard-top-row"]}>
      <View>{storeItemOrderData.orderDate}</View>
      <View className={style["delivery-status"]}>
        {storeItemOrderData.deliveryStatus}
      </View>
    </View>
    <View className={style["ordercard-thumbnail-container"]}>
      {storeItemOrderData.thumbNails.map((thumbnailUrl, thumbnailIdx) => (
        <AbstractImage
          className={style["ordercard-thumbnail"]}
          key={thumbnailIdx}
          src={thumbnailUrl}
          type="none"
        />
      ))}
    </View>
    <View className={style["ordercard-bottom-row"]}>
      <View>订单号：{storeItemOrderData.orderNumber}</View>
      <View className={style["ordercard-bottom-row-right"]}>
        <View>共{storeItemOrderData.totalItemsOrdered}件</View>
        <PriceView
          className={style["price"]}
          type="small"
          price={storeItemOrderData.orderTotalPrice}
        />
      </View>
    </View>
  </View>
);

export default function UserOrderListing() {
  const { userInfoState, dispatchUserDataAction } = useUserInfo();
  const { dispatchAuthAction } = useAuth();
  const { userData } = userInfoState;

  useDidShow(() => {
    getUserOrderList(dispatchUserDataAction, userData!, {
      query: { limit: process.env.defaultPageSize!, page: 1, type: 0 },
      authDispatch: dispatchAuthAction,
    });
  });

  useEffect(() => {
    //setItemLength(userData!.likedItems!.length)
  }, [userData?.orderHistory]);

  return (
    <Layout>
      {userData?.orderHistory && (
        <UserSubPageBase title="我的订单" scrollable>
          {/* EventOrders */}
          <View className={style["list-wrapper"]}>
            <AbstractAccordion
              title={`课程/讲座/展览 (${userData.orderHistory.events.length})`}
              bottomBorderColor={colors.colorGrey}
              notoSans
              defaultOpen
            >
              <C20AllListing
                cardList={userData.orderHistory.events.map(
                  (eventOrderListItem: any) => ({
                    ...eventOrderListItem,
                    //grayedOut: !eventOrderListItem.status,
                    link: `pages/user-order-details/index?orderNo=${eventOrderListItem.orderNo}`,
                  })
                )}
              />
            </AbstractAccordion>
            {/* ShopItem orders */}
            <AbstractAccordion
              title={`礼品卡/纪念品/出版物 (${userData.orderHistory.storeItems.length})`}
              bottomBorderColor={colors.colorGrey}
              notoSans
            >
              {userData.orderHistory.storeItems.map((storeOrder) => (
                <AbstractNavigator
                  className={style["ordercard-navigator"]}
                  key={storeOrder.orderNumber}
                  url={`pages/user-order-details/index?orderNo=${storeOrder.orderNumber}`}
                >
                  <StoreItemOrderCard storeItemOrderData={storeOrder} />
                </AbstractNavigator>
              ))}
            </AbstractAccordion>
          </View>

          <View
            onClick={() => {
              sendAction(ActionNames.MakeInvoice);
              navigateTo("pages/user-invoice-center/index");
            }}
            className={style["invoice-center-link"]}
          >
            <View className={style["invoice-center-link-text"]}>发票中心</View>
          </View>
        </UserSubPageBase>
      )}
    </Layout>
  );
}
